<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }
    </style>
    <script src="https://unpkg.com/konva@3.1.0/konva.js"></script>
    <script src="./js/01.js"></script>
</head>

<body>

    <div id="cas"></div>

    <script>
        

        var width = window.innerWidth;
        var height = window.innerHeight;
        
        
        console.log(window);
        //创建舞台 
        var stage = new Konva.Stage({
            container: "cas",
            width: width,
            height: height
        });

        // //创建层 
        var layer = new Konva.Layer();

        //创建组1 
        var group = new Konva.Group({
            x: stage.width() / 2,
            y: stage.height() / 2,
        });


        // //最外层圆 
        // var arc  = new Konva.Arc({
        //     x: 0,
        //     y: 0,
        //     innerRadius: 200,
        //     outerRadius: 200,
        //     angle:180,
        //     fill: 'blue',
        //     // fillLinearGradientStartPoint: { x: -50, y: -50 },
        //     // fillLinearGradientEndPoint: { x: 50, y: 50 },
        //     // fillLinearGradientColorStops: [0, 'blue', 1, 'yellow'],
        //     stroke: 'blue',
        //     strokeWidth: 5,
        //     dash: [9, 9],
        //     clockwise:true,
        //     draggable: true,

        // });
        // group.add(arc);
        

        // 第二个圆 
        // var circle2 = new Konva.Circle({
        //     x: 0,
        //     y: 0,
        //     radius: 180,
        //     // stroke: "blue",
        //     // strokeWidth: 1,
        //     // dash: [6, 3],
        //     fill: "#74A2F0",
        //     opacity: 5

        // });
        // group.add(circle2);



        //第三个圆 
        // var circle3 = new Konva.Circle({
        //     x: 0,
        //     y: 0,
        //     radius: 135,
        //     // stroke: "blue",
        //     // strokeWidth: 2,
        //     // dash: [10, 5]
        // });
        // group.add(circle3);



        //第四个圆 
        // var circle4 = new Konva.Circle({
        //     x: 0,
        //     y: 0,
        //     radius: 105,
        //     fill: "#000",
        //     opacity: 0.4
        // });
        // group.add(circle4);


        //第五个圆 
        // var circle5 = new Konva.Circle({
        //     x: 0,
        //     y: 0,
        //     radius: 80,
        //     fill: "#ddd"

        // });
        // group.add(circle5);

        // //添加文字 
        var text = new Konva.Text({
            x: -80,
            y: -12,
            text: "晴转多云",
            fill: "#000",
            fontSize: 24,
            width: 160,
            align: "center"
        });

        group.add(text);

        layer.add(group);

        var inGroup = new Konva.Group({
            x: stage.width() / 2,
            y: stage.height() / 2,
        });

        // var arrColor = ["red", "green", "blue", "orange", "purple", "red", "green", "blue", "orange", "purple", "orange", "purple"];

        // var arrText = ["web", "node.js", "ajax", "html5", "css", "01", "02", "03", "04", "05", "04", "05",];

        // var colors = ['red', 'orange', 'yellow'];

        var imagesrc = ['./image/FENG.png', './image/FENG.png', './image/FENG.png', 
                 './image/FENG.png', './image/FENG.png', './image/FENG.png', './image/FENG.png', './image/FENG.png', 
                 './image/FENG.png', './image/FENG.png', './image/FENG.png']
        
        // 循环的数据data
        //循环11个图片

        for (var i = 0; i < 11 ; i++) {

            var cir = new Circle({

                x: 150 * Math.cos(32 * i * Math.PI / 180), //圆心x轴的坐标 
                y: 150 * Math.sin(32 * i * Math.PI / 180), //圆心y轴的坐标 
               
                // x:0,
                // y:0,
                    //   radius: 135,
                // outR: 35, //外圆的半径 
                // inR: 120, //内圆的半径 
                // fill: arrColor[i], //填充颜色 
                // text: arrText[i], //文字 
                // outOpacity: 0.3, //外圆的透明度 
                // inOpacity: 0.6,  //内圆的透/明度 
                image: imagesrc[i]
            });
            cir.drawCircle(inGroup);
        }

        layer.add(inGroup);

        //************************************************ 

        //运动动画 
        var step = 1; //转动的角度 

        var anim = new Konva.Animation(function () {
            // outGroup.rotate(step);
            // outGroup.getChildren().each(function (ele, index) {
            //     ele.rotate(-step);
            // });
            inGroup.rotate(-step);
            inGroup.getChildren().each(function (ele, index) {
                ele.rotate(step);
            });
        }, layer);

        // 
        anim.start();
        stage.add(layer);

        // 
        stage.on("mouseover", function () {
            step = 0.1;
        });
        
        stage.on("mouseout", function () {
            step = 0.1;
        });

    </script>
</body>

</html>